<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table v-show="formInline.type!=6" highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" label="日期" prop="datetime"></el-table-column>
                <el-table-column align="center" prop="type_name" :label="formInline.type_name=='陪同票'?'关联套餐名称':'套餐名称'">
                </el-table-column>
                <el-table-column align="center" prop="times" :label="formInline.type_name=='陪同票'?'陪同票数量':'数量'">
                </el-table-column>
                <el-table-column align="center" prop="money" label="金额"></el-table-column>
                <el-table-column align="center" prop="card_no" label="会员卡号"></el-table-column>
                <el-table-column align="center" prop="nick" label="操作员工"></el-table-column>
            </el-table>
            <el-table v-show="formInline.type==6" highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" label="日期" prop="date_create"></el-table-column>
                <el-table-column align="center" prop="type_name" label="套餐名称"></el-table-column>
                <el-table-column align="center" prop="times" label="数量"></el-table-column>
                <el-table-column align="center" prop="stars" label="星星数"></el-table-column>
                <el-table-column align="center" prop="money" label="金额"></el-table-column>
                <el-table-column align="center" prop="card_no" label="会员卡号"></el-table-column>
                <el-table-column align="center" prop="nick" label="操作员工"></el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
    } from "@/api/storage_control/sell_detail";
    import { pickerOptionsF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                formInline: {},
                pickerOptions: pickerOptionsF(),
                pickerDate: []
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.beforeComingIn();
            })
        },
        methods: {
            beforeComingIn() {
                if (this.$route.query.routerflag) {
                    this.pickerDate = this.$route.params.pickerDate;
                    this.formInline.accompany_num = this.$route.params.accompany_num;
                    this.formInline.package_id = this.$route.params.package_id;
                    this.formInline.pass_buss_id = this.$route.params.pass_buss_id;
                    this.formInline.store_id = this.$route.params.store_id;
                    this.formInline.employee_id = this.$route.params.employee_id;
                    this.formInline.star_id = this.$route.params.star_id;
                    this.formInline.type = this.$route.params.type;
                    this.formInline.type_name = this.$route.params.type_name;
                    if (this.$route.params.pickerDate) {
                        this.searchClick();
                    }
                }
            },
            dateChange() {
                this.searchClick();
            },
            // 搜索
            searchClick() {
                if (!this.formInline.store_id) {
                    this.$message({ type: 'error', message: '筛选条件已失效，请关闭此页面，重新跳转' });
                    return;
                }
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    response.forEach(val => {
                        val.money *= 1;
                        val.times *= 1;
                        val.stars *= 1;
                        val.card_no = val.card_no?val.card_no:"-";
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>